import React, { Component } from "react";
import { Route, Switch, NavLink, Redirect } from "react-router-dom";
import News from "./News/index";
import Message from "./Message/index";

export default class About extends Component {
  render() {
    return (
      <div className="container">
        <div>
          <h2>Home组件内容</h2>
          <div>
            <ul className="nav nav-tabs">
              <li>
                <NavLink className="list-group-item" to="/home/news">
                  News
                </NavLink>
              </li>
              <li>
                <NavLink className="list-group-item" to="/home/message">
                  Message
                </NavLink>
              </li>
            </ul>
            <div>
              <Switch>
                <Route path="/home/news" component={News}></Route>
                <Route path="/home/message" component={Message}></Route>
                <Redirect to="/home/news" />
              </Switch>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
